<template>

    <div>
        <h3 class="chattitle">聊天框</h3>
        <div class="chat-im">
            <!--左部-->
            <div class="chatleft">
                <div class="chatleft-title"><span>近期消息</span></div>
                <div class="chatroom">
                    <a-menu id="msgMenu" v-model:selectedKeys="selectedKeys" mode="inline" class="menu">
                        <a-menu-item v-for="chatroom in list" :key="chatroom.id"
                            @click="CR(chatroom.id, chatroom.userId)">
                            <a-avatar :src="'/api' + chatroom.userAvatar" />
                            {{ chatroom.userName }}
                        </a-menu-item>
                    </a-menu>
                </div>
            </div>
            <!--右部-->
            <div class="chatright">
                <div class="chatright-dialog">
                    <div class="chatright-title">
                        <span>聊天框</span>
                    </div>

                    <!--消息框-->
                    <div class="messsge-list">
                        <div id="" class="message-list-content">
                            <div v-for="msg in msgList" :key="msg.id">
                                <div class="message-time">{{ msg.time }}</div>
                                <div class="message-info">
                                    <div class="frame" v-if="msg.userId == now.userId">
                                        <div class="triangle"></div>
                                        <span class="rotationtiao">{{ msg.cont }}</span>
                                    </div>
                                    <div class="frame-right" v-else>
                                        <div class="triangle-right"></div>
                                        <span class="rotationtiao-right">{{ msg.cont }}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="message-more">
                                <span>没有更多消息啦</span>
                            </div>
                        </div>
                    </div>
                    <!--消息框-->

                    <!--发文字框-->
                    <div class="sent-box">
                        <div class="sent-info">
                            <div class="chintro-input">
                                <a-textarea v-model:value="now.cont" placeholder="写点东西" :rows="4" />
                            </div>
                        </div>
                        <div style="padding: 10px 10px 10px; margin-top: 20px">
                            <div class="sent-button">
                                <a-button type="primary" style="float: right;margin-top:5px" @click="submit">发送
                                </a-button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>
<script setup>
import { ref, reactive } from 'vue'
import { get, post, put } from '@/common'

const selectedKeys = ref([])

const list = ref([])

const msgList = ref([])

const now = ref({
    letterId: 0,
    userId: 0,
    cont: ""
})

const check = () => {
    const id = window.location.search.split("=")[1];
    if(id == null) {
        getChatRoomList()
    } else {
        post("/chat/getroom/" + id).then((res) => {
            console.log(res.data)
            getChatRoomList2(res.data, id)
        })
    }
}

const getMsgList = () => {
    get("/chat/room/" + now.value.userId).then((res) => {
        msgList.value = res.data
        put("/message/read/chat/" + now.value.letterId).then()
    })
}

const getChatRoomList = () => {
    get("/chat/roomList",).then((res) => {
        list.value = res.data
        selectedKeys.value.push(res.data[0].id)
        now.value.letterId = res.data[0].id
        now.value.userId = res.data[0].userId
        getMsgList()
        console.log(list.value)
    })
}
const getChatRoomList2 = (letterId, userId) => {
    get("/chat/roomList",).then((res) => {
        list.value = res.data
        now.value.letterId = letterId
        now.value.userId = userId
        getMsgList()
        console.log(list.value)
        selectedKeys.value.push(letterId)
    })
}

const CR = (id, userId) => {
    now.value.letterId = id
    now.value.userId = userId
    getMsgList()
    now.value.cont = ""
}

const submit = () => {
    post("/chat/submit", now.value).then((res) => {
        now.value.cont = ""
        getMsgList()
    })
}


// getChatRoomList()
check()

</script>


<style scoped>
.body {
    display: flex;
    flex-direction: row;
}

.chatroom {
    overflow: auto;
    width: 100%;
    height: 100%;
}

.menu {
    height: 40px;
}

.chat {
    height: 600px;
    width: 600px;
    margin-left: 3px;
    background-color: #f4f5f7;
    display: flex;
    flex-direction: column;
}

.show {
    height: 400px;
    border-bottom: 1px solid #000
}

.input {
    height: 150px;
}

.button {
    float: right;
    margin-right: 20px;
}

.chattitle {
    font-size: 22px;
    border-left: 3px solid rgba(0, 0, 0, 0.8);
    padding-left: 8px;
    line-height: 16px;
    margin-bottom: 15px;
    font-weight: normal;
    margin-top: 10px;
    text-align: left;
}

.chat-im {
    font-size: 12px;
    color: #666;
    background-color: #fff;
    box-shadow: 0 2px 4px 0 rgb(121 146 185 / 54%);
    border-radius: 4px;
    height: 100%;
    display: flex;
    position: relative;
}

.chatleft {
    width: 240px;
    border-right: 1px solid #e9eaec;
    position: relative;
}

.chatleft-title {
    padding-left: 24px;
    line-height: 35px;
    height: 36px;
    border-bottom: 1px solid #e9eaec;
    user-select: none;
    overflow: hidden;
}

.chatright {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}

.chatright-title {
    height: 36px;
    flex-shrink: 0;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    border-bottom: 1px solid #e9eaec;
    position: relative;
    text-align: center;
    color: #333;
}

.chatright-dialog {
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-align: stretch;
    align-items: stretch;
    height: 100%;
}

.message-list {
    -webkit-box-flex: 1;
    flex: 1;
    position: relative;
    overflow-x: hidden;
    overflow-y: scroll;
    background-color: #f4f5f7;
}

.message-list-content {
    height: 320px;
    overflow: auto;
    display: flex;
    flex-direction: column-reverse;
}

.message-more {
    padding: 16px 0 0;
    text-align: center;
    color: #23ade5;
    min-height: 38px;
}

.message-time {
    padding: 16px 0 16px;
    text-align: center;
}

.message-info {
    min-height: 48px;
    padding: 0 16px 16px;
    overflow: hidden;
    position: relative;
}

.sent-box {
    height: 162px;
    border-top: 1px solid #d8d8d8;
    border-bottom-right-radius: 4px;
    background-color: #f4f5f7;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

.sent-info {
    position: relative;
}

.core-style {
    width: 100%;
    min-height: 22px;
    max-height: 300px;
    letter-spacing: 1px;
    white-space: pre-wrap;
    overflow-x: hidden;
    overflow-y: auto;
    color: #222;
    background-color: transparent;
    font-size: 14px;
    vertical-align: baseline;
    outline: none;
    line-height: normal;
    border-radius: 4px;
    word-break: break-word;
    word-wrap: break-word;
}

.chintro-input {
    float: left;
    width: 100%;
}

.sent-button {
    -webkit-box-pack: end;
    justify-content: flex-end;
    height: 46px;
}

.frame {
    width: 100%;
    float: left;
    position: relative;
    padding: 0 0 0 5px;
}

.triangle {
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 5px solid #98E165;
    position: absolute;
    left: 0;
    top: 6px;
}

.rotationtiao {
    float: left;
    padding: 5px 10px;
    background-color: #98E165;
    font-size: 14px;
    border-radius: 2px;
}

.frame-right {
    width: 100%;
    float: left;
    position: relative;
    padding: 0 5px 0 0;
}

.triangle-right {
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid #98E165;
    position: absolute;
    right: 0;
    top: 6px;
}

.rotationtiao-right {
    float: right;
    padding: 5px 10px;
    background-color: #98E165;
    font-size: 14px;
    border-radius: 2px;
}
</style>